<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流：multi-column</title>
    <style>
        .container {
            column-count: 6;
        }
        /*  */
        .container img{
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <section class="item"><img src="../images/1.jpeg" alt=""></section>
        <section class="item"><img src="../images/2.jpeg" alt=""></section>
        <section class="item"><img src="../images/3.jpeg" alt=""></section>
        <section class="item"><img src="../images/4.jpeg" alt=""></section>
        <section class="item"><img src="../images/5.jpeg" alt=""></section>
        <section class="item"><img src="../images/6.jpeg" alt=""></section>
        <section class="item"><img src="../images/7.jpeg" alt=""></section>
        <section class="item"><img src="../images/8.jpeg" alt=""></section>
        <section class="item"><img src="../images/9.jpeg" alt=""></section>
        <section class="item"><img src="../images/10.jpeg" alt=""></section>
        <section class="item"><img src="../images/11.jpeg" alt=""></section>
        <section class="item"><img src="../images/12.jpeg" alt=""></section>
        <section class="item"><img src="../images/13.jpeg" alt=""></section>
        <section class="item"><img src="../images/14.jpeg" alt=""></section>
        <section class="item"><img src="../images/15.jpeg" alt=""></section>
        <section class="item"><img src="../images/16.jpeg" alt=""></section>
        <section class="item"><img src="../images/17.jpeg" alt=""></section>
        <section class="item"><img src="../images/18.jpeg" alt=""></section>
        <section class="item"><img src="../images/19.jpeg" alt=""></section>
        <section class="item"><img src="../images/20.jpeg" alt=""></section>
        <section class="item"><img src="../images/21.jpeg" alt=""></section>
        <section class="item"><img src="../images/22.jpeg" alt=""></section>
        <section class="item"><img src="../images/23.jpeg" alt=""></section>
        <section class="item"><img src="../images/24.jpeg" alt=""></section>
        <section class="item"><img src="../images/25.jpeg" alt=""></section>
        <section class="item"><img src="../images/26.jpeg" alt=""></section>
        <section class="item"><img src="../images/27.jpeg" alt=""></section>
        <section class="item"><img src="../images/28.jpeg" alt=""></section>
        <section class="item"><img src="../images/29.jpeg" alt=""></section>
        <section class="item"><img src="../images/30.jpeg" alt=""></section>
        <section class="item"><img src="../images/31.jpeg" alt=""></section>
        <section class="item"><img src="../images/32.jpeg" alt=""></section>
        <section class="item"><img src="../images/33.jpeg" alt=""></section>
        <section class="item"><img src="../images/34.jpeg" alt=""></section>
        <section class="item"><img src="../images/35.jpeg" alt=""></section>
        <section class="item"><img src="../images/36.jpeg" alt=""></section>
        <section class="item"><img src="../images/37.jpeg" alt=""></section>
        <section class="item"><img src="../images/38.jpeg" alt=""></section>
        <section class="item"><img src="../images/39.jpeg" alt=""></section>
        <section class="item"><img src="../images/40.jpeg" alt=""></section>
        <section class="item"><img src="../images/41.jpeg" alt=""></section>
        <section class="item"><img src="../images/42.jpeg" alt=""></section>
        <section class="item"><img src="../images/43.jpeg" alt=""></section>
        <section class="item"><img src="../images/44.jpeg" alt=""></section>
        <section class="item"><img src="../images/45.jpeg" alt=""></section>
        <section class="item"><img src="../images/46.jpeg" alt=""></section>
        <section class="item"><img src="../images/47.jpeg" alt=""></section>
        <section class="item"><img src="../images/48.jpeg" alt=""></section>
        <section class="item"><img src="../images/49.jpeg" alt=""></section>
        <section class="item"><img src="../images/50.jpeg" alt=""></section>
        <section class="item"><img src="../images/51.jpeg" alt=""></section>
        <section class="item"><img src="../images/52.jpeg" alt=""></section>
        <section class="item"><img src="../images/53.jpeg" alt=""></section>
        <section class="item"><img src="../images/54.jpeg" alt=""></section>
        <section class="item"><img src="../images/55.jpeg" alt=""></section>
        <section class="item"><img src="../images/56.jpeg" alt=""></section>
        <section class="item"><img src="../images/57.jpeg" alt=""></section>
        <section class="item"><img src="../images/58.jpeg" alt=""></section>
        <section class="item"><img src="../images/59.jpeg" alt=""></section>
        <section class="item"><img src="../images/60.jpeg" alt=""></section>
    </div>
</body>

</html>